<template>
  <!-- 学号、姓名、系别、专业、电话、邮箱、年级 -->
  <el-form
      ref="infoFormRef"
      :model="infoForm"
      :hide-required-asterisk="true"
      status-icon
      label-width="80px"
      style="margin: auto"
  >

    <el-form-item label="学号" prop="no">
      <el-input v-model.number="infoForm.no" disabled>
        <template #prefix>
          <el-icon class="el-input__icon">
            <collection-tag/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="infoForm.name" disabled>
        <template #prefix>
          <el-icon class="el-input__icon">
            <user/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="系别" prop="major">
      <el-input v-model="infoForm.major" disabled>
        <template #prefix>
          <el-icon class="el-input__icon">
            <school />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="电话" prop="tel">
      <el-input v-model="infoForm.tel" disabled>
        <template #prefix>
          <el-icon class="el-input__icon">
            <phone/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="infoForm.email" disabled>
        <template #prefix>
          <el-icon class="el-input__icon">
            <message/>
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="年级" prop="grade">
      <el-input v-model="infoForm.grade" disabled>
        <template #prefix>
          <el-icon class="el-input__icon">
            <place />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from "axios";
import Breadcrumb from "@/components/Breadcrumb";

export default {
  components: {Breadcrumb},
  data(){
    return{
      infoForm: {
        no: '',
        name: "",
        tel: '',
        email: '',
        major:'',
        grade: "",
      },
    }
  },
  methods: {
    getInfo(){
      axios.post('/students/info', {
      }).then(res => {
        let r = res.data
        this.infoForm = r.infoForm[0]
        console.log(this.infoForm)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.getInfo()
  },
  watch: {
    '$route': 'getInfo'
  },
}
</script>
